<template>
  <base-layout
    :dialog-title="dialogTitle"
    :dialog-visible="dialogVisible"
    @dialog-close="dialogClose"
    :dialogWidth="dialogWidth"
  >
    <template #searchPanel>
      <el-row :gutter="20">
        <search-panel
          v-slot="{ form }"
          @search="search"
          :showExportButton="true"
          @export="handleDataExport('ClientCar','车辆信息导出')"
          :showAddButton="false"
          :excelPer="'admin'"
          :selectPer="'clientCar:page'"
        >
          <CarModel
            v-model="carModels"
            ref="carModel"
            placeholder="车型组件"
            :checkStrictly="true"
          />
          <el-input
            clearable
            style="width: 200px"
            v-model="form.clientLike"
            placeholder="客戶姓名/手机号"
          />
          <el-input
            clearable
            style="width: 200px"
            v-model="form.licensePlateNumber"
            placeholder="车牌号/行驶证号"
          />
        </search-panel>
      </el-row>
    </template>
    <template #contentPanel>
      <data-table
        :value="tableData"
        :has-action="true"
        :table-column-attributes="tableColumnAttributes"
        :width="160"
        :isShowPage="true"
        :total-count="totalCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        @row-dblclick="dataTableRowDblclickEv"
      >
        <template #action="{ row }">
          <i
            class="el-icon-edit"
            title="修改"
            v-permission="'clientCar:update'"
            style="margin-left: 15px; cursor: pointer"
            @click="interestsInfo(row, 0)"
          ></i>
          <i
            class="el-icon-delete"
            title="删除"
            v-permission="'clientCar:del'"
            style="color: red; margin-left: 15px; cursor: pointer"
            @click="handleDataDelete(row)"
          ></i>
        </template>
      </data-table>
      <!--工具条-->
    </template>

    <template #dialog>
      <dialog-view-detail
        :id='carCustmerInfo.id'
        :carId="carCustmerInfo.carId"
      />
    </template>
  </base-layout>
</template>

<script>
import { clientCarList, deleteClientCar, getClientCarById } from '@/api/after-sale/client/car'
import baseMixin from '@/mixins/base'
import ElFormItem from 'element-ui/packages/form/src/form-item.vue'
import ElRow from 'element-ui/packages/row/src/row'
import ElCol from 'element-ui/packages/col/src/col'
import { parseTimeToYMDHMS, parseTime } from '@/utils'
import DialogViewDetail from '@/views/after-sale/client-manage/view/index';

export default {
  components: {
    ElCol,
    ElRow,
    ElFormItem,
    DialogViewDetail,
  },
  mixins: [
    baseMixin({
      idName: 'id',
      findData: clientCarList,
      deleteData: deleteClientCar,
      exportData: '',
      dataName: ['content', 'totalRecords'],
      isAdd: false,
      idName: 'id',
      format (res) {
        return res.map((data) => {
          data.createTime = parseTimeToYMDHMS(data.createTime)
          return data
        })
      },
    }),
  ],
  data () {
    return {
      carModels: [], //车辆选择
      dict: {},
      dialogVisible: false,
      communitys: [],
      dialogWidth: '1000px',
      service: {},
      isAdd: false,
      carCustmerInfo: {
        id: '',//userID
        carId: '',//carID
      },//车辆的客户id
      tableColumnAttributes: [
        {
          name: '所属门店',
          value: 'storeName',
          type: 'text',
        },
        {
          name: '车牌号',
          value: 'licensePlateNumber',
          type: 'text',
        },
        {
          name: '品牌',
          value: 'carBrandName',
          type: 'text',
        },
        {
          name: '车系',
          value: 'carSeriesName',
          type: 'text',
        },
        {
          name: '年款',
          value: 'timeType',
          type: 'text',
        },
        {
          name: '车型',
          value: 'carModelName',
          type: 'text',
        },
        {
          name: '车色',
          value: 'carColor',
          type: 'text',
        },
        {
          name: '里程数',
          value: 'mileage',
          type: 'text',
        },
        {
          name: '车主姓名',
          value: 'clientName',
          type: 'text',
        },
        {
          name: '车主电话',
          value: 'phone',
          type: 'text',
        },
        {
          name: '保险公司',
          value: 'companyName',
          type: 'text',
        },
        {
          name: '保险投保日期',
          value: 'insureDate',
          type: 'text',
        },
        {
          name: '保险到期',
          value: 'insureExpireDate',
          type: 'text',
        },
        {
          name: '备注',
          value: 'remark',
          type: 'text',
        },
        {
          name: '录入时间',
          value: 'createTime',
          type: 'text',
        },
        {
          name: '录入人',
          value: 'createUser',
          type: 'text',
        },
      ],
    }
  },
  async created () { },
  methods: {
    //表格双击-查看车辆相关信息
    async dataTableRowDblclickEv (row) {
      let { success, data } = await getClientCarById(row.id);
      if (success) {
        this.carCustmerInfo.id = data.clientId;
        this.carCustmerInfo.carId = data.id;
        this.dialogVisible = true;
        this.dialogTitle = '车辆详情';
      }
    },
    search (form) {
      let modelsArry = this.$refs.carModel.getLabels() //获取选中车型的相关数据
      form.carBrandName = modelsArry[0]
      form.carSeriesName = modelsArry[1]
      form.timeType = modelsArry[2]
      form.rankValue = modelsArry[3]
      this.searchOptions = form
      this.currentPage = 1
      this.setTableData()
    },
    interestsInfo (row, type) {
      // this.$store.state.carInfoId = row.id
      // this.$store.state.carInfotype = type
      this.$router.push({
        path: '/client-manage/car-edit',
        query: {
          id: row.id,
          type,
        },
      })
    },
    getAdverts (row) {
      getcategory(row.id).then((result) => {
        if (result.code == '0') {
          this.advert = result.data
          this.handleDataChange(row)
        }
      })
    },
    addService (row) {
      var id = row ? row.id : ''
      this.$store.state.carInfoId = id
      this.$store.state.carInfotype = 0
      this.$router.push({
        path: '/customer/carInfo',
      })
    },
    excelInfo () { },
  },
}
</script>

<style lang="scss" scoped>
.vLine {
  border-left: solid 3px black;
  height: 16px;
  vertical-align: bottom;
  display: inline-block;
}
</style>
